<template>
  <div class="detail-container">
    <el-form ref="formdataRef" :model="formDate" :rules="formdataRules" label-width="200px">
      <el-form-item prop="username" label="姓名">
        <el-input v-model="formDate.username" />
      </el-form-item>
      <el-form-item prop="workNumber" label="工号">
        <el-input v-model="formDate.workNumber" :disabled="isEdit" />
      </el-form-item>
      <el-form-item prop="mobile" label="手机">
        <el-input v-model="formDate.mobile" :disabled="isEdit" />
      </el-form-item>
      <!-- 部门这边代码太多，我们选择封装组件 -->
      <el-form-item label="部门" prop="departmentId">
        <!-- 部门组件 -->
        <!-- 运用了v-model语法糖 实现子向父传值 -->
        <departmentCom v-model="formDate.departmentId" />
      </el-form-item>
      <el-form-item prop="formOfEmployment" label="聘用形式">
        <el-select v-model="formDate.formOfEmployment" clearable placeholder="请选择">
          <el-option label="正式" :value="1" />
          <el-option label="非正式" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item prop="timeOfEntry" label="入职时间">
        <el-date-picker
          v-model="formDate.timeOfEntry"
          clearable
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item prop="correctionTime" label="转正时间">
        <el-date-picker
          v-model="formDate.correctionTime"
          clearable
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="员工头像">
        <!--  员工头像进行组件封装 -->
        <uploadImage v-model="formDate.staffPhoto" />
      </el-form-item>
      <el-form-item prop="mobile">
        <el-button type="primary" size="mini" @click="submitForm">保存更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import departmentCom from './component/departmentCom.vue'
import uploadImage from './component/upload-image.vue'
import { addEmployeeRequest, getEmployeeInfoRequest, updateEmployeeInfoRequest } from '@/api/employee'

export default {
  name: 'EmployeeDetail',
  components: { departmentCom, uploadImage },
  data() {
    return {
      formDate: {
        username: '',
        mobile: '',
        formOfEmployment: 1,
        workNumber: '',
        departmentId: 1,
        timeOfEntry: '',
        correctionTime: '',
        staffPhoto: ''

      },
      value: [],
      formdataRules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|5|6|7|8|9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 4, message: '姓名为2-4位', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        formOfEmployment: [
          { required: true, message: '请选择聘用形式', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'change' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'change' },
          { validator: (rule, value, callback) => {
            // 时间的比较利用时间戳来进行比较
            // 时间戳的获取：+new Date()  Date.now()  new Date().getTime()
            if (+new Date(this.formDate.timeOfEntry) > +new Date(value)) {
              callback(new Error('转正时间不能早于入职时间'))
            } else {
              callback()
            }
          }, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    // ！！将任何数据类型转换为布尔值
    isEdit() {
      return !!this.$route.params.id
    }
  },
  created() {
    if (this.$route.params.id) {
      this.getEmployeeInfo()
    }
  },
  methods: {
    async getEmployeeInfo() {
      const res = await getEmployeeInfoRequest(this.$route.params.id)
      console.log(res)
      this.formDate = res.data
    },

    submitForm() {
      this.$refs.formdataRef.validate(async(valid) => {
        if (valid) {
          try {
            if (this.isEdit) {
              await updateEmployeeInfoRequest(this.formDate)
              this.$message.success('更新员工信息成功')
            } else {
              await addEmployeeRequest(this.formDate)
              this.$message.success('添加员工信息成功')
            }
            this.$router.back()
            // this.$router.go(-1)
            // this.$router.push('/employee')
          } catch (err) {
            this.$message.error('添加员工失败')
          }
        }
      })
    }
  }
}
</script>
<!-- 不管深度的问题，直接写一个style上面不加任何的属性，就是普通的css，那么这个样式就没有穿透问题，不管深度有多深都可以被选中 -->

<style lang="scss" scoped>
.detail-container{
  // padding-top: 20px;
  padding: 20px;
  ::v-deep .el-input__inner{
    width: 300px;
    height: 28px;
    line-height: 28px;
  }
}
</style>
